<template>
  <div>
    <Carousel/>
    <Search/>
    <el-row gutter="20">
      <el-col :span="20">
        <Level @getLevel="getLevel"/>
        <Region @getRegion="getRegion"/>
        <div class="hospital">
          <Card class="item" v-for="(item,index) in hasHospitalArr" :key="index" :hospitalInfo="item"></Card>
          <el-pagination
              v-model:current-page="pageNo"
              v-model:page-size="pageSize"
              style="width: 100%"
              :page-sizes="[10, 20, 30, 40]"
              layout="prev, pager, next, jumper, ->, sizes, total"
              :total="total"
              @current-change="currentChange"
              @size-change="sizeChange"
          />
        </div>
      </el-col>
      <el-col :span="4">
        <Tip/>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import {reqHospital} from "@/api/home";
  import Carousel from './carousel/index.vue'
  import Search from './search/index.vue'
  import Level from './level/index.vue'
  import Region from './region/index.vue'
  import Card from './card/index.vue'
  import Tip from './tip/index.vue'
  import type {Content, HospitalResponseData} from '@/api/home/type'

  let pageNo = ref<number>(1)
  let pageSize = ref<number>(10);
  let hasHospitalArr = ref<Content>([]);
  let total = ref<number>(0);

  let hostype = ref<string>('');
  let districtCode = ref<string>('');
  onMounted(() => {
    getHospitalInfo();
  })
  const getHospitalInfo = async () => {
    let result:HospitalResponseData = await reqHospital(pageNo.value, pageSize.value,hostype.value,districtCode.value);
    if(result.code == 200) {
      hasHospitalArr.value = result.data.content;
      total.value = result.data.totalElements;
    }
  }
  const currentChange = () => {
    getHospitalInfo();
  }
  const sizeChange = () => {
    getHospitalInfo();
  }
  const getLevel = (level:string) => {
    //收集等级参数
    hostype.value = level;
    //再次发送请求
    getHospitalInfo();
  }
  const getRegion = (region:string) => {
    districtCode.value = region;
    getHospitalInfo();
  }
</script>
<style scoped lang="scss">
  .hospital {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 40%;
      margin: 10px 0;
    }
  }
</style>
